<template>
  <div id="newsBack">
    <el-container>
      <el-header style="height:100px">
        <el-row class="end" style="width:95%;margin-top:25px">
          <!-- <el-button type="primary" size="mini" >保存</el-button> -->
          <el-button type="primary" plain size="mini" @click="preparePramas">提交</el-button>
        </el-row>
        <div class="imgCol">
          <div style="width:95%">
            <el-divider></el-divider>
          </div>
        </div>
      </el-header>
      <el-main style="margin:20px">
        <el-row>
          <el-input type="textarea" :rows="10" placeholder="说点什么吧..." v-model="textarea"></el-input>
        </el-row>
        <el-row style="margin-top:40px">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :http-request="uploadFile"
            :on-remove="handleRemove"
            :before-upload="beforeAvatarUpload"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textarea: "",

      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,

      fileList: []
    };
  },
  mounted() {
    var body = document.getElementById("newsBack");
    var height = document.documentElement.clientHeight - 120;
    body.style.height = height + "px";
    console.log(height);
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      this.fileList = [];
      var i = 0;
      for (i in fileList) {
        this.fileList.push(fileList[i].raw);
      }
      console.log(this.fileList);
    },
    uploadFile(file) {
      // console.log("yes");
      this.fileList.push(file.file);
      console.log(this.fileList);
    },
    preparePramas() {
      var form = new FormData();
      form.append("opinionText", this.textarea);
      var i = 0;
      //注意postman中的数组和实际数组的差别
      for (i in this.fileList) {
        form.append("opinionPicture", this.fileList[i]);
      }
      // form.append("opinionPicture",this.fileList);
      // this.submitAll(form);
      this.resureSubmit(form);
    },
    resureSubmit(data) {
      if (this.textarea.length == 0 && this.fileList.length == 0) {
        this.$message({
          message: "请至少提交一点意见哦",
          type: "warning"
        });
      } else {
        if (this.fileList.length != 0) {
          var size = 0;
          this.fileList.forEach(file => {
            size += file.size / (1024 * 1024);
          });
          console.log("size:", size);

          if (size <= 4) {
            this.submitAll(data);
          } else {
            this.$message({
              message: "图片大小不能超过4M！",
              type: "error"
            });
          }
        } else {
          this.submitAll(data);
        }
      }
    },
    submitAll(data) {
      var URL = this.IP + "/system/publishOpinion";
      console.log(URL);
      console.log(data);
      this.$ajax({
        method: "put",
        url: URL,
        data: data,
        headers: {
          "Content-type": "multipart/form-data"
        }
      })
        .then(response => {
          console.log(response.data);
          var code = response.data.code;
          if (code == 0) {
            this.$message({
              message: response.data.data,
              type: "success"
            });
          } else {
            this.$message({
              message: response.data.msg,
              type: "error"
            });
            console.log(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
          //Toast(error);
        });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type;
      const isLt2M = file.size / (1024 * 1024);
      if (isJPG !== "image/jpeg" && isJPG !== "image/png") {
        //非图片类型判断
        this.$message.error("上传文件类型必须是图片！");
        return false;
      }
      if (isLt2M > 4) {
        this.$message.error("上传图片大小不能超过 4MB!");
        return false;
      } else if (isLt2M > 1) {
        this.$message({
          message: "图片有点大，若上传请耐心等待",
          type: "warning"
        });
        return true;
      } else {
        return true;
      }
    }
  }
};
</script>
<style>
#newsBack {
  /* height:600px; */
  background-color: #fff;
  margin: 15px;
  border-radius: 5px;
}
#userNewsBox {
  /* height:600px; */
  background-color: #fff;
  margin: 15px;
  border-radius: 5px;
}
.el-header,
.el-main,
.el-footer,
.el-aside {
  padding: 0px;
}
.end {
  display: flex;
  justify-content: flex-end;
}
.pointer {
  cursor: pointer;
}
.imgCol {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>